﻿<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
                    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
                    xmlns:local="clr-namespace:System.Reactive.Contrib.Monitoring.UI"
                    xmlns:sys="clr-namespace:System;assembly=mscorlib">

    <!--  Credit: http://www.codeproject.com/Articles/248112/Templating-WPF-Expander-Control  -->
    <local:MultiplyConverter x:Key="multiplyConverter" />

    <!--  Animated Expander Button's Template  -->
    <ControlTemplate x:Key="AnimatedExpanderButtonTemp" TargetType="{x:Type ToggleButton}">
        <Border x:Name="ExpanderButtonBorder"
                Background="{TemplateBinding Background}"
                BorderBrush="{TemplateBinding BorderBrush}"
                BorderThickness="{TemplateBinding BorderThickness}"
                Padding="{TemplateBinding Padding}">
            <Grid>
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="Auto" />
                    <ColumnDefinition Width="*" />
                </Grid.ColumnDefinitions>
                <Rectangle Grid.ColumnSpan="2" Fill="Transparent" />
                <Ellipse Name="Circle"
                         Grid.Column="0"
                         Width="20"
                         Height="20"
                         HorizontalAlignment="Center"
                         VerticalAlignment="Center"
                         Stroke="DarkGray"
                         StrokeThickness="0" />
                <Path x:Name="Arrow"
                      Grid.Column="0"
                      HorizontalAlignment="Center"
                      VerticalAlignment="Center"
                      Data="M 1,1.5 L 4.5,5 8,1.5"
                      RenderTransformOrigin="0.5,0.5"
                      Stroke="{TemplateBinding Foreground}"
                      StrokeThickness="2">
                    <Path.RenderTransform>
                        <RotateTransform Angle="0" />
                    </Path.RenderTransform>
                </Path>
                <ContentPresenter x:Name="HeaderContent"
                                  Grid.Column="1"
                                  Margin="4,0,0,0"
                                  ContentSource="Content" />
            </Grid>
        </Border>
        <ControlTemplate.Triggers>
            <!--  Animate arrow when toggled  -->
            <Trigger Property="IsChecked" Value="True">
                <Trigger.EnterActions>
                    <BeginStoryboard>
                        <Storyboard>
                            <DoubleAnimation Duration="0:0:0.2"
                                             Storyboard.TargetName="Arrow"
                                             Storyboard.TargetProperty="(Path.RenderTransform).(RotateTransform.Angle)"
                                             To="180" />
                        </Storyboard>
                    </BeginStoryboard>
                </Trigger.EnterActions>
                <Trigger.ExitActions>
                    <BeginStoryboard>
                        <Storyboard>
                            <DoubleAnimation Duration="0:0:0.2"
                                             Storyboard.TargetName="Arrow"
                                             Storyboard.TargetProperty="(Path.RenderTransform).(RotateTransform.Angle)"
                                             To="0" />
                        </Storyboard>
                    </BeginStoryboard>
                </Trigger.ExitActions>
            </Trigger>

            <!--  MouseOver, Pressed behaviours  -->
            <Trigger Property="IsMouseOver" Value="true">
                <Setter TargetName="Circle" Property="Stroke" Value="#FF3C7FB1" />
                <Setter TargetName="Arrow" Property="Stroke" Value="#222" />
            </Trigger>
            <Trigger Property="IsPressed" Value="true">
                <Setter TargetName="Circle" Property="Stroke" Value="#FF526C7B" />
                <Setter TargetName="Circle" Property="StrokeThickness" Value="1.5" />
                <Setter TargetName="Arrow" Property="Stroke" Value="#FF003366" />
            </Trigger>
        </ControlTemplate.Triggers>
    </ControlTemplate>

    <!--
        Slide Out Content Expander's Template,
        Uses: AnimatedExpanderButtonTemp from above,
        MultiplyConverter in codebehind
    -->
    <Style TargetType="{x:Type Expander}">
        <Setter Property="Control.Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type Expander}">
                    <DockPanel>
                        <ToggleButton x:Name="ExpanderButton"
                                      Content="{TemplateBinding Header}"
                                      DockPanel.Dock="Top"
                                      IsChecked="{Binding Path=IsExpanded,
                                                          RelativeSource={RelativeSource TemplatedParent}}"
                                      OverridesDefaultStyle="True"
                                      Padding="1.5,0"
                                      Template="{StaticResource AnimatedExpanderButtonTemp}" />
                        <ScrollViewer x:Name="ExpanderContentScrollView"
                                      HorizontalContentAlignment="Stretch"
                                      VerticalContentAlignment="Bottom"
                                      DockPanel.Dock="Bottom"
                                      HorizontalScrollBarVisibility="Hidden"
                                      VerticalScrollBarVisibility="Hidden">
                            <ScrollViewer.Tag>
                                <sys:Double>0.0</sys:Double>
                            </ScrollViewer.Tag>
                            <ScrollViewer.Height>
                                <MultiBinding Converter="{StaticResource multiplyConverter}">
                                    <Binding ElementName="ExpanderContent" Path="ActualHeight" />
                                    <Binding Path="Tag" RelativeSource="{RelativeSource Self}" />
                                </MultiBinding>
                            </ScrollViewer.Height>
                            <ContentPresenter x:Name="ExpanderContent" ContentSource="Content" />
                        </ScrollViewer>
                    </DockPanel>
                    <ControlTemplate.Triggers>
                        <Trigger Property="IsExpanded" Value="True">
                            <Trigger.EnterActions>
                                <BeginStoryboard>
                                    <Storyboard>
                                        <DoubleAnimation Duration="0:0:0.2"
                                                         Storyboard.TargetName="ExpanderContentScrollView"
                                                         Storyboard.TargetProperty="Tag"
                                                         To="1" />
                                    </Storyboard>
                                </BeginStoryboard>
                            </Trigger.EnterActions>
                            <Trigger.ExitActions>
                                <BeginStoryboard>
                                    <Storyboard>
                                        <DoubleAnimation Duration="0:0:0.2"
                                                         Storyboard.TargetName="ExpanderContentScrollView"
                                                         Storyboard.TargetProperty="Tag"
                                                         To="0" />
                                    </Storyboard>
                                </BeginStoryboard>
                            </Trigger.ExitActions>
                        </Trigger>
                    </ControlTemplate.Triggers>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>
</ResourceDictionary>